<template>
  <div class="car">
    <van-checkbox-group v-model="result">
      <van-checkbox
        :name="item"
        v-for="item in cartList"
        :key="item.id"
        @click="singleCheckFn"
        :label-disabled="true"
      >
        <!-- 删除小组件 -->
        <van-swipe-cell>
          <van-card
            :price="item.retail_price"
            desc="描述信息"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          >
            <template #num>
              <van-stepper
                v-model="item.number"
                theme="round"
                button-size="22"
                disable-input
                max="5"
                step="1"
                :long-press="false"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="deleteFn(item)" 
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>

    <!-- 提交订单栏 -->
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="checkAllfn">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
//引入购物车数据
import { getCarData ,carDelete } from "@/utils/http";
export default {
  name: "Car",
  data() {
    return {
      result: [], //选中商品的集合
      cartList: [], //购物车数组
      checked: false, //全选状态
    };
  },
  computed: {
    // 依赖数据发生变化,计算属性会重新计算
    totalPrice() {
      //根据选中项的单价*数量 累加就是总价
      let sum = 0; //定义总价
      this.result.forEach((item) => {
        //    console.log(item);
        sum += item.retail_price * item.number * 100;
      });
      return sum;
    },
  },
  created() {
    getCarData().then((res) => {
      console.log(res);
      this.cartList = res.data.data.cartList;
    });
  },
  methods: {
    onSubmit() {
      // 提交订单
    },
    onClickEditAddress() {
      //修改地址
    },
    checkAllfn() {
      // 全选事件
      // console.log(this.checked);
      if (this.checked) {
        this.result = this.cartList;
      } else {
        this.result = [];
      }
    },
    singleCheckFn() {
      //单选事件
      // console.log(this.result);
      if (
        this.result.length == this.cartList.length &&
        this.cartList.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    deleteFn(item){
      // console.log(item);
      carDelete({
        productIds:String(item.product_id)
      }).then((res)=>{
        console.log(res);
        if (res.data.errno==0) {
          this.$toast.success("删除成功")
          this.cartList=res.data.data.cartList;
      
          if(this.cartList.length==0){
            this.shecked=false;
          }
        }
      })
    }
  }
};
</script>

<style lang='less' scoped>
/deep/.van-checkbox__label {
  flex: 1;
}
.van-submit-bar {
  bottom: 50px;
}
 .delete-button {
    height: 100%;
  }
</style>